<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("title", "注册");
%>

<%@ include file="/WEB-INF/views/shared/master/weContentHeader.jsp"%>

<style>

	.title {
		z-index: 0 !important;
	}
	.weui-cell__hd img{
		margin-right:15px;
	}
	
	.weui-cell:before{
		border-top:0px;
		
	}
	.weui-cell{
		padding:10px 20px 10px 0px;
		margin:0 auto;
		width:70%;
		border-bottom:1px solid #d9d9d9;	
	}
	
	.center-icon{
		width:125px;
		height:125px;
	}
	
	.imgBox{
		margin-top:10px;
		text-align:center;
	}
	
	.titlebox{
		margin-top:5px;
	}

	.bottom-lab {
		margin-left:44px;
		margin-top:60px;
		background: #fff;
		width: 80%;
		text-align: center;
	}
	.bottom-btn {
		margin-bottom: 15px;
		background-color: #2196F3;
		height:40px;
		line-height:40px;	
	}
	
	.registration{
		color:grey;
	}
	
	.toolbar .picker-button {
		color:#2196F3;
	}
	.btn-code{
		float:right;
	}
	.input-code{
		width:50%;
	}
	.btn-text{
		background-color:white;
		color:#2196F3;
		padding:5px;
		border:1px solid #2196F3;	
	}
	.btn-text:disabled{
		color:#ddd;
		border:1px solid #ddd;
	}
	.weui-toptips {
		height: 1.8rem !important;
		font-size: 1.1rem;
	}
	.color-red {
		color: red;
	}
</style>

<%@ include file="/WEB-INF/views/shared/master/weTitle.jsp"%>
<div class="goback" data-back-point="personCenter"></div>
<div class="imgBox">
	<img class="center-icon" alt="" src="<c:url value="/images/we/registration/logo.png" />">
</div>
<form name="customerRegister" id="customerRegister" action="<c:url value='/wechat/cust/customerIden/registerResult' />"  method="post">
	<input type="hidden" id="id" name="id" value="${customer.id}" />
	<div class="titlebox">

		<div class="weui-cell">
			<div class="weui-cell__hd">
				<img class="left-icon" alt="" src="<c:url value="/images/we/registration/phone.png" />">
			</div>
			<div class="weui-cell__bd">
				<input id="phone" name="phone" class="weui-input selected-color" type="text" placeholder="请输入手机号" onBlur="checkPhone()">
			</div>
		</div>
		
		<div class="weui-cell">
			<div class="weui-cell__hd">
				<img class="left-icon" alt="" src="<c:url value="/images/we/registration/security-code.png" />">
			</div>
			<div class="weui-cell__bd getcode">
				<input id="code" name="code" class="weui-input selected-color input-code" type="text" placeholder="验证码" value="${code }">
				<div class="btn-code">
					<button type="button" class="btn-text" id="btn-get" onclick="getCode()">获取验证码</button>
				</div>
			</div>
		</div>
		
		<div class="weui-cell">
			<div class="weui-cell__hd">
				<img class="left-icon" alt="" src="<c:url value="/images/we/registration/password.png" />">
			</div>
			<div class="weui-cell__bd">
				<input id="loginPassword" name="loginPassword" class="weui-input selected-color" type="password" placeholder="设置登录密码" onBlur="checkPassword()">
			</div>
		</div>
		
		
		<div class="bottom-lab">
			<button type="button" onclick="registerNowClick()" class="weui-btn weui-btn_primary bottom-btn">确定</button>
		</div>
	</div>
<form>



<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>	
<script type="text/javascript"> 

$(function(){
	loadCity();
	var phoneWidth = $(window).width();

	//动态设置button的margin-left的值
	var btnWidth = $(".bottom-lab").width();
	var left = (phoneWidth-btnWidth)/2;
	$(".bottom-lab").css("margin-left",left);
});


function checkIsVisitor(){
	var url=$.getVirtualPath()+"/wechat/cust/personCenter/getCustomerInfo";
	var customer=$.getJsonPost(url);
	return customer.level=="visitor";
}

function registerNowClick(){
	//防止后退进来的
	if(!checkIsVisitor()){
		$.toast("无需重复注册","forbidden");
		return;
	}
	
	if(!checkInput()){
		return;
	}
	var formData=$("#customerRegister").serialize();
	var action=$("#customerRegister").attr("action");
	var result=$.getTextPost(action,formData);
	if(result=="true"){
		$.toast("注册成功");
		setTimeout(function(){
			window.location.href=$.getVirtualPath()+"/wechat/cust/personCenter/index";	
		},400);
		
	}else{
		$.toast("注册失败", "forbidden");
	}
}

var countdown=60; 
var theCode;
var phoneExisted;
var sendMessagePhone;

function sendMessage(){
    var phoneNum = $("#phone").val();
    sendMessagePhone = phoneNum;
    var url=$.getVirtualPath()+"/wechat/cust/customerIden/sendMessage";
    theCode=$.getText(url,"phone="+phoneNum);
	setCountdown();
}

function checkPhoneExisted(){
	var phoneNum = $("#phone").val();
    var url=$.getVirtualPath()+"/wechat/cust/customerIden/checkPhoneExisted";
    phoneExisted = $.getText(url, "phone=" + phoneNum);
    if (phoneExisted == "false") {
    	return true;
    }else if (phoneExisted == "true") {
    	$.toptip("此手机号码已经注册","error");
    	return false;
    }
    return false;
}


/* 获取验证码 */
function getCode(){
	if(checkPhone() && checkPhoneExisted()){
		sendMessage();//倒计时+ajax验证码
	}else{
		$('#phone').focus();
	}
}

/* 验证手机号码 */
function checkPhone(){
	var phone = $('#phone').val();
	var pattern = /^1[0-9]{10}$/;
	if(phone == '') {
		$.toptip("请输入手机号码","error");
		return false;
	}else if(!pattern.test(phone)){
		$.toptip("请输入正确的手机号码","error");
		return false;
	}
	return true;
}

/* 发送验证码倒计时 */
function setCountdown() {
	var $btnSend = $("#btn-get");
    if (countdown == 0) { 
    	$btnSend.attr('disabled',false); 
    	$btnSend.text("获取验证码");
        countdown = 60; 
        return;
    }
    $btnSend.attr('disabled',true);
    $btnSend.text("(" + countdown + ")s后重发");
    countdown--;
    setTimeout(function() { setCountdown($btnSend) },1000)
}

/* 验证密码 */
function checkPassword(){
	var password=$("#loginPassword").val();
	var reg2 = /^[a-zA-Z0-9]{6,20}$/;
	
	if($.isNull(password)){
		$.toptip("密码不可为空","error");
		return false;
	}else if(!reg2.test(password)){
		$.toptip("密码输入不规范","error");
		return false;
	}
	return true;
}

/* 验证码 */
function checkCode(){
	var code = $("#code").val();
	var phone = $("#phone").val();
	if($.isNull(code)){
		$.toptip("请输入验证码","error");
		return false;
	}else if(code != theCode) {
		$.toptip("验证码输入错误","error");
		return false;
	}
	if (sendMessagePhone != phone) {
		$.toptip("验证码与手机号不匹配","error");
		return false;
	}
	return true;
}

/* 检查输入 */
function checkInput(){
	if(checkPassword()&&checkPhone()&&checkPhoneExisted()&&checkCode()){
		return true;
	}
	return false;
}
</script>
<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>